<template>
  <!-- 商品概况表格 -->
  <div class="components-prod-table">
    <table class="table">
      <!-- 商品概况行 -->
      <tr>
        <td>
          <span style="font-size: 14px; font-weight:bold;color: black; margin-left:20px;">{{ $t('dataAnalysis.productsOverview') }}</span>
        </td>
        <td>
          <span class="font-set">{{ $t('dataAnalysis.numberOfNewProducts') }}</span>
          <el-popover
            placement="top"
            width="200"
            trigger="hover"
            :content="$t('dataAnalysis.addProdDescribe')"
          >
            <template #reference>
              <el-icon><QuestionFilled /></el-icon>
            </template>
          </el-popover>
          <br>
          <span style="font-size: 14px; font-weight:bold;color: black;">{{ prodData.data.newProd }}</span>
          <br>
          <span
            :class="['font-set',prodData.dateValue === 1 ? 'hidden':'']"
          >{{ [' -',' -',`${$t('dataAnalysis.compareWithThePrevious7Days')}`,`${$t('dataAnalysis.compareWithThePrevious30Days')}`,`${$t('dataAnalysis.compareWithThePreviousOneDay')}`,`${$t('dataAnalysis.compareWithThePreviousAMonth')}`][prodData.dateValue] }}</span>
          <img
            v-if="prodData.rate.newProdRate < 0 && prodData.dateValue !== 1"
            src="~@/assets/img/downArrow.png"
            style="margin-bottom: 2px"
            width="8"
            height="10"
            alt=""
          >
          <img
            v-if="prodData.rate.newProdRate > 0 && prodData.dateValue !== 1"
            src="~@/assets/img/upArrow.png"
            style="margin-bottom: 2px"
            width="8"
            height="10"
            alt=""
          >
          <span
            v-if="prodData.rate.newProdRate !== 0 && prodData.dateValue !== 1"
            class="font-set"
            :class="[prodData.rate.newProdRate > 0 ? 'font-green' : 'font-red']"
          >{{ onHandleRatio(prodData.rate.newProdRate) }}</span>
          <span
            v-if="prodData.rate.newProdRate === 0 && prodData.dateValue !== 1"
            class="font-set font-gray"
          >- 0%</span>
        </td>
        <td>
          <span class="font-set">{{ $t('dataAnalysis.goodsVisited') }}</span>
          <el-popover
            placement="top"
            width="200"
            trigger="hover"
            :content="$t('dataAnalysis.prodSurveyTips3')"
          >
            <template #reference>
              <el-icon><QuestionFilled /></el-icon>
            </template>
          </el-popover>
          <br>
          <span
            style="font-size: 14px; font-weight:bold;color: black;"
          >{{ prodData.data.visitedProd }}</span>
          <br>
          <span
            :class="['font-set',prodData.dateValue === 1 ? 'hidden':'']"
          >{{ [' -',' -',`${$t('dataAnalysis.compareWithThePrevious7Days')}`,`${$t('dataAnalysis.compareWithThePrevious30Days')}`,`${$t('dataAnalysis.compareWithThePreviousOneDay')}`,`${$t('dataAnalysis.compareWithThePreviousAMonth')}`][prodData.dateValue] }}</span>
          <img
            v-if="prodData.rate.visitedProdRate < 0 && prodData.dateValue !== 1"
            src="~@/assets/img/downArrow.png"
            style="margin-bottom: 2px"
            width="8"
            height="10"
            alt=""
          >
          <img
            v-if="prodData.rate.visitedProdRate > 0 && prodData.dateValue !== 1"
            src="~@/assets/img/upArrow.png"
            style="margin-bottom: 2px"
            width="8"
            height="10"
            alt=""
          >
          <span
            v-if="prodData.rate.visitedProdRate !== 0 && prodData.dateValue !== 1"
            class="font-set"
            :class="[prodData.rate.visitedProdRate > 0 ? 'font-green' : 'font-red']"
          >{{ onHandleRatio(prodData.rate.visitedProdRate) }}</span>
          <span
            v-if="prodData.rate.visitedProdRate === 0 && prodData.dateValue !== 1"
            class="font-set font-gray"
          >- 0%</span>
        </td>
        <td>
          <span class="font-set">{{ $t('dataAnalysis.goodsSold') }}</span>
          <el-popover
            placement="top"
            width="200"
            trigger="hover"
            :content="$t('dataAnalysis.prodSurveyTips')"
          >
            <template #reference>
              <el-icon><QuestionFilled /></el-icon>
            </template>
          </el-popover>
          <br>
          <span
            style="font-size: 14px; font-weight:bold;color: black;"
          >{{ prodData.data.dynamicSale }}</span>
          <br>
          <span
            :class="['font-set',prodData.dateValue === 1 ? 'hidden':'']"
          >{{ [' -',' -',`${$t('dataAnalysis.compareWithThePrevious7Days')}`,`${$t('dataAnalysis.compareWithThePrevious30Days')}`,`${$t('dataAnalysis.compareWithThePreviousOneDay')}`,`${$t('dataAnalysis.compareWithThePreviousAMonth')}`][prodData.dateValue] }}</span>
          <img
            v-if="prodData.rate.dynamicSaleRate < 0 && prodData.dateValue !== 1"
            src="~@/assets/img/downArrow.png"
            style="margin-bottom: 2px"
            width="8"
            height="10"
            alt=""
          >
          <img
            v-if="prodData.rate.dynamicSaleRate > 0 && prodData.dateValue !== 1"
            src="~@/assets/img/upArrow.png"
            style="margin-bottom: 2px"
            width="8"
            height="10"
            alt=""
          >
          <span
            v-if="prodData.rate.dynamicSaleRate !== 0 && prodData.dateValue !== 1"
            class="font-set"
            :class="[prodData.rate.dynamicSaleRate > 0 ? 'font-green' : 'font-red']"
          >{{ onHandleRatio(prodData.rate.dynamicSaleRate) }}</span>
          <span
            v-if="prodData.rate.dynamicSaleRate === 0 && prodData.dateValue !== 1"
            class="font-set font-gray"
          >- 0%</span>
        </td>
      </tr>
      <!-- /商品概况行 -->
      <!-- 商品流量行 -->
      <tr>
        <td>
          <span style="font-size: 14px; font-weight:bold;color: black; margin-left:20px;">{{ $t('dataAnalysis.commodityFlow') }}</span>
        </td>
        <td>
          <span class="font-set">{{ $t('dataAnalysis.shareVisits') }}</span>
          <el-popover
            placement="top"
            width="200"
            trigger="hover"
            :content="$t('dataAnalysis.prodSurveyTips2')"
          >
            <template #reference>
              <el-icon><QuestionFilled /></el-icon>
            </template>
          </el-popover>
          <br>
          <span style="font-size: 14px; font-weight:bold;color: black;">{{ prodData.data.shareVisit }}</span>
          <br>
          <span
            :class="['font-set',prodData.dateValue === 1 ? 'hidden':'']"
          >{{ [' -',' -',`${$t('dataAnalysis.compareWithThePrevious7Days')}`,`${$t('dataAnalysis.compareWithThePrevious30Days')}`,`${$t('dataAnalysis.compareWithThePreviousOneDay')}`,`${$t('dataAnalysis.compareWithThePreviousAMonth')}`][prodData.dateValue] }}</span>
          <img
            v-if="prodData.rate.shareVisitRate < 0 && prodData.dateValue !== 1"
            src="~@/assets/img/downArrow.png"
            style="margin-bottom: 2px"
            width="8"
            height="10"
            alt=""
          >
          <img
            v-if="prodData.rate.shareVisitRate > 0 && prodData.dateValue !== 1"
            src="~@/assets/img/upArrow.png"
            style="margin-bottom: 2px"
            width="8"
            height="10"
            alt=""
          >
          <span
            v-if="prodData.rate.shareVisitRate !== 0 && prodData.dateValue !== 1"
            class="font-set"
            :class="[prodData.rate.shareVisitRate > 0 ? 'font-green' : 'font-red']"
          >{{ onHandleRatio(prodData.rate.shareVisitRate) }}</span>
          <span
            v-if="prodData.rate.shareVisitRate === 0 && prodData.dateValue !== 1"
            class="font-set font-gray"
          >- 0%</span>
        </td>
        <td>
          <span class="font-set">{{ $t('dataAnalysis.productViews') }}</span>
          <el-popover
            placement="top"
            width="200"
            trigger="hover"
            :content="$t('dataAnalysis.prodSurveyTips4')"
          >
            <template #reference>
              <el-icon><QuestionFilled /></el-icon>
            </template>
          </el-popover>
          <br>
          <span style="font-size: 14px; font-weight:bold;color: black;">{{ prodData.data.browse }}</span>
          <br>
          <span
            :class="['font-set',prodData.dateValue === 1 ? 'hidden':'']"
          >{{ [' -',' -',`${$t('dataAnalysis.compareWithThePrevious7Days')}`,`${$t('dataAnalysis.compareWithThePrevious30Days')}`,`${$t('dataAnalysis.compareWithThePreviousOneDay')}`,`${$t('dataAnalysis.compareWithThePreviousAMonth')}`][prodData.dateValue] }}</span>
          <img
            v-if="prodData.rate.browseRate < 0 && prodData.dateValue !== 1"
            src="~@/assets/img/downArrow.png"
            style="margin-bottom: 2px"
            width="8"
            height="10"
            alt=""
          >
          <img
            v-if="prodData.rate.browseRate > 0 && prodData.dateValue !== 1"
            src="~@/assets/img/upArrow.png"
            style="margin-bottom: 2px"
            width="8"
            height="10"
            alt=""
          >
          <span
            v-if="prodData.rate.browseRate !== 0 && prodData.dateValue !== 1"
            class="font-set"
            :class="[prodData.rate.browseRate > 0 ? 'font-green' : 'font-red']"
          >{{ onHandleRatio(prodData.rate.browseRate) }}</span>
          <span
            v-if="prodData.rate.browseRate === 0 && prodData.dateValue !== 1"
            class="font-set font-gray"
          >- 0%</span>
        </td>
        <td>
          <span class="font-set">{{ $t('dataAnalysis.productVisitors') }}</span>
          <el-popover
            placement="top"
            width="200"
            trigger="hover"
            :content="$t('dataAnalysis.prodSurveyTips5')"
          >
            <template #reference>
              <el-icon><QuestionFilled /></el-icon>
            </template>
          </el-popover>
          <br>
          <span style="font-size: 14px; font-weight:bold;color: black;">{{ prodData.data.visitor }}</span>
          <br>
          <span
            :class="['font-set',prodData.dateValue === 1 ? 'hidden':'']"
          >{{ [' -',' -',`${$t('dataAnalysis.compareWithThePrevious7Days')} `,`${$t('dataAnalysis.compareWithThePrevious30Days')} `,`${$t('dataAnalysis.compareWithThePreviousOneDay')} `,`${$t('dataAnalysis.compareWithThePreviousAMonth')} `][prodData.dateValue] }}</span>
          <img
            v-if="prodData.rate.visitorRate < 0 && prodData.dateValue !== 1"
            src="~@/assets/img/downArrow.png"
            style="margin-bottom: 2px"
            width="8"
            height="10"
            alt=""
          >
          <img
            v-if="prodData.rate.visitorRate > 0 && prodData.dateValue !== 1"
            src="~@/assets/img/upArrow.png"
            style="margin-bottom: 2px"
            width="8"
            height="10"
            alt=""
          >
          <span
            v-if="prodData.rate.visitorRate !== 0 && prodData.dateValue !== 1"
            class="font-set"
            :class="[prodData.rate.visitorRate > 0 ? 'font-green' : 'font-red']"
          >{{ onHandleRatio(prodData.rate.visitorRate) }}</span>
          <span
            v-if="prodData.rate.visitorRate === 0 && prodData.dateValue !== 1"
            class="font-set font-gray"
          >- 0%</span>
        </td>
      </tr>
      <!-- /商品流量行 -->
      <!-- 商品转换行 -->
      <tr>
        <td>
          <span style="font-size: 14px; font-weight:bold;color: black; margin-left:20px;">{{ $t('dataAnalysis.commodityConversion') }}</span>
        </td>
        <td>
          <span class="font-set">{{ $t('dataAnalysis.carNumbers') }}</span>
          <el-popover
            placement="top"
            width="200"
            trigger="hover"
            :content="$t('dataAnalysis.prodSurveyTips6')"
          >
            <template #reference>
              <el-icon><QuestionFilled /></el-icon>
            </template>
          </el-popover>
          <br>
          <span style="font-size: 14px; font-weight:bold;color: black;">{{ prodData.data.addCart }}</span>
          <br>
          <span
            :class="['font-set',prodData.dateValue === 1 ? 'hidden':'']"
          >{{ [' -',' -',`${$t('dataAnalysis.compareWithThePrevious7Days')} `,`${$t('dataAnalysis.compareWithThePrevious30Days')} `,`${$t('dataAnalysis.compareWithThePreviousOneDay')} `,`${$t('dataAnalysis.compareWithThePreviousAMonth')} `][prodData.dateValue] }}</span>
          <img
            v-if="prodData.rate.addCartRate < 0 && prodData.dateValue !== 1"
            src="~@/assets/img/downArrow.png"
            style="margin-bottom: 2px"
            width="8"
            height="10"
            alt=""
          >
          <img
            v-if="prodData.rate.addCartRate > 0 && prodData.dateValue !== 1"
            src="~@/assets/img/upArrow.png"
            style="margin-bottom: 2px"
            width="8"
            height="10"
            alt=""
          >
          <span
            v-if="prodData.rate.addCartRate !== 0 && prodData.dateValue !== 1"
            class="font-set"
            :class="[prodData.rate.addCartRate > 0 ? 'font-green' : 'font-red']"
          >{{ onHandleRatio(prodData.rate.addCartRate) }}</span>
          <span
            v-if="prodData.rate.addCartRate === 0 && prodData.dateValue !== 1"
            class="font-set font-gray"
          >- 0%</span>
        </td>
        <td>
          <span class="font-set">{{ $t('dataAnalysis.orderCounts') }}</span>
          <el-popover
            placement="top"
            width="200"
            trigger="hover"
            :content="$t('dataAnalysis.prodSurveyTips7')"
          >
            <template #reference>
              <el-icon><QuestionFilled /></el-icon>
            </template>
          </el-popover>
          <br>
          <span style="font-size: 14px; font-weight:bold;color: black;">{{ prodData.data.orderNum }}</span>
          <br>
          <span
            :class="['font-set',prodData.dateValue === 1 ? 'hidden':'']"
          >{{ [' -',' -',`${$t('dataAnalysis.compareWithThePrevious7Days')} `,`${$t('dataAnalysis.compareWithThePrevious30Days')} `,`${$t('dataAnalysis.compareWithThePreviousOneDay')} `,`${$t('dataAnalysis.compareWithThePreviousAMonth')} `][prodData.dateValue] }}</span>
          <img
            v-if="prodData.rate.orderNumRate < 0 && prodData.dateValue !== 1"
            src="~@/assets/img/downArrow.png"
            style="margin-bottom: 2px"
            width="8"
            height="10"
            alt=""
          >
          <img
            v-if="prodData.rate.orderNumRate > 0 && prodData.dateValue !== 1"
            src="~@/assets/img/upArrow.png"
            style="margin-bottom: 2px"
            width="8"
            height="10"
            alt=""
          >
          <span
            v-if="prodData.rate.orderNumRate !== 0 && prodData.dateValue !== 1"
            class="font-set"
            :class="[prodData.rate.orderNumRate > 0 ? 'font-green' : 'font-red']"
          >{{ onHandleRatio(prodData.rate.orderNumRate) }}</span>
          <span
            v-if="prodData.rate.orderNumRate === 0 && prodData.dateValue !== 1"
            class="font-set font-gray"
          >- 0%</span>
        </td>
        <td>
          <span class="font-set">{{ $t('dataAnalysis.payCounts') }}</span>
          <el-popover
            placement="top"
            width="200"
            trigger="hover"
            :content="$t('dataAnalysis.prodSurveyTips8')"
          >
            <template #reference>
              <el-icon><QuestionFilled /></el-icon>
            </template>
          </el-popover>
          <br>
          <span style="font-size: 14px; font-weight:bold;color: black;">{{ prodData.data.payNum }}</span>
          <br>
          <span
            :class="['font-set',prodData.dateValue === 1 ? 'hidden':'']"
          >{{ [' -',' -',`${$t('dataAnalysis.compareWithThePrevious7Days')} `,`${$t('dataAnalysis.compareWithThePrevious30Days')} `,`${$t('dataAnalysis.compareWithThePreviousOneDay')} `,`${$t('dataAnalysis.compareWithThePreviousAMonth')} `][prodData.dateValue] }}</span>
          <img
            v-if="prodData.rate.payNumRate < 0 && prodData.dateValue !== 1"
            src="~@/assets/img/downArrow.png"
            style="margin-bottom: 2px"
            width="8"
            height="10"
            alt=""
          >
          <img
            v-if="prodData.rate.payNumRate > 0 && prodData.dateValue !== 1"
            src="~@/assets/img/upArrow.png"
            style="margin-bottom: 2px"
            width="8"
            height="10"
            alt=""
          >
          <span
            v-if="prodData.rate.payNumRate !== 0 && prodData.dateValue !== 1"
            class="font-set"
            :class="[prodData.rate.payNumRate > 0 ? 'font-green' : 'font-red']"
          >{{ onHandleRatio(prodData.rate.payNumRate) }}</span>
          <span
            v-if="prodData.rate.payNumRate === 0 && prodData.dateValue !== 1"
            class="font-set font-gray"
          >- 0%</span>
        </td>
      </tr>
      <!-- /商品转换行 -->
    </table>
  </div>
</template>

<script setup>
const onHandleRatio = (ratioVal) => {
  ratioVal = (ratioVal * 100).toFixed(2)
  if (ratioVal < 0) {
    return ratioVal * -1 + '%'
  }
  return ratioVal + '%'
}
// eslint-disable-next-line no-unused-vars
const props = defineProps({
  prodData: {
    type: Object,
    default: null
  }
})

</script>
<style lang="scss" scoped>
.components-prod-table{
  .font-set {
    color: #666666;
    font-size: 12px;
    margin-right: 10px;
  }
  &:deep(.el-icon-question) {
    color: #C8C9CC;
  }
  .font-green {
    color: #3CC480;
  }
  .font-gray {
    color: darkgrey;
  }
  .font-red {
    color: #FF4141;
  }
  .hidden {
    visibility: hidden; // 不显示内容，但是需要占位
  }
  .table {
    width: 100%;
    border-collapse: collapse;
    tr {
      margin: 5px 0;
      border-bottom: 1px whitesmoke solid; // 每一行表格的结束的分割线
      td {
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: left;
        line-height: 2em;
        span {
          margin-top: 0.5em;
        }
      }
    }
  }
}
</style>
